import {messages} from "share/common";
/**
 * Created by Allen on 2018/3/12.
 */
import React from 'react'
import { connect } from 'react-redux'
import httpFetch from 'share/httpFetch'
import menuRoute from 'routes/menuRoute'
import { Button, Modal, Tooltip , message, Icon, Radio, Row, Col, Card, Steps, Form, Input, Select, Table,
  Popconfirm, Alert, Checkbox } from 'antd'

import OpenHeliosHotel from 'containers/supplier-management/overview/enable-service/open-helios-hotel/open-helios-hotel';

import 'styles/supplier-management/overview/enable-service.scss'
import enableSupplierService from 'containers/supplier-management/overview/enable-service/enable-service.service'
import CMBCImg from 'images/cmbc-img.png'
import elemeImg from 'images/eleme-bg.png'
const Step = Steps.Step;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
import errorMessage from 'share/errorMessage';
const deadLineDateArray = [{label: '每月1日',value: '1'},{label: '每月2日',value: '2'},{label: '每月3日',value: '3'},
  {label: '每月4日',value: '4'},{label: '每月5日',value: '5'},{label: '每月6日',value: '6'},{label: '每月7日',value: '7'},
  {label: '每月8日',value: '8'},{label: '每月9日',value: '9'},{label: '每月10日',value: '10'},{label: '每月11日',value: '11'},{label: '每月12日',value: '12'},{label: '每月13日',value: '13'},{label: '每月14日',value: '14'},{label: '每月15日',value: '15'},{label: '每月16日',value: '16'},{label: '每月17日',value: '17'},{label: '每月18日',value: '18'},{label: '每月19日',value: '19'},{label: '每月20日',value: '20'},{label: '每月21日',value: '21'},{label: '每月22日',value: '22'},{label: '每月23日',value: '23'},{label: '每月24日',value: '24'},{label: '每月25日',value: '25'},{label: '每月26日',value: '26'},{label: '每月27日',value: '27'},{label: '每月28日',value: '28'},{label: '每月29日',value: '29'},{label: '每月30日',value: '30'},{label: '每月31日',value: '31'},]; //报销期限的下拉框选项
const billMonthArray = [{label: '当月',value: 'CURRENT_MONTH'},{label: '上月', value: 'LAST_MONTH'},
                        {label: '当月,上月',value: 'CURRENT_MONTH,LAST_MONTH'}];
//账单月下拉框选项


class enableService extends React.Component{
  lock = false;//开通按钮防点击锁
  constructor(props){
    super(props);
    this.didiServerValues = ["1","2","3"]; // 选择的要开通的滴滴服务(滴滴服务有三个用户管理 订单管理 发票管理)
    this.state = {
      hrsModal:false,//是否显示hrs绑定modal
      JDModal:false,//是否显示京东绑定modal
      modalBindVisible: false,
      modalOpenVisible: false,
      ctripSuccessVisible: false,  //携程开通成功的提示modal框显示标识
      loading: false,
      modalBindTitle: '',
      modalOpenTitle: '',
      cmbcCurrent: 0,  //商务卡开卡页的步骤条当前页
      tableIndex: 0,   //商务卡表格项的索引
      data: [],   //表格数据
      columns: [
        {
        title: messages('supplier.key1'/*账户信息(必填)*/),
        children: [{
          title: messages('supplier.key2'/*客户号*/),
          dataIndex: 'clientId',
          key: 'clientId',
          width: 100,
          render: (text,record) => (
            <span>
              <Input type="number" placeholder={messages('common.please.enter')} defaultValue={record.clientId}
                     onChange={e => this.handleChange(e.target.value, record.indexTag,'clientId')}/>
            </span>
          )
        },{
          title: messages('supplier.key3'/*密码*/),
          dataIndex: 'clientSecret',
          key: 'clientSecret',
          width: 100,
          render: (text,record,value) => (
            <span>
              <Input type="password" placeholder={messages('common.please.enter')} maxLength="8" defaultValue={record.clientSecret}
                     onChange={e => this.handleChange(e.target.value,record.indexTag,'clientSecret')}/>
            </span>
          )
        },{
          title: messages('supplier.key4'/*成本中心号*/),
          dataIndex: 'corNum',
          key: 'corNum',
          width: 100,
          render: (text,record,value) => (
            <span>
              <Input type="number"  placeholder={messages('common.please.enter')} defaultValue={record.corNum}
                     onChange={e => this.handleChange(e.target.value,record.indexTag,'corNum')}/>
            </span>
          )
        }]
      },{
        title: <Tooltip title="设置后系统将在报销期限日凌晨检查未审核通过的费用或商务卡消费，并标记为已逾期">
          <span>{messages('supplier.key5'/*逾期设置(非必填)*/)}</span>
        </Tooltip>,
        children: [{
          title: messages('supplier.key6'/*报销期限*/),
          dataIndex: 'deadLineDate',
          key: 'deadLineDate',
          width: 100,
          render: (text,record,value) => (
            <span>
               <Select
                 getPopupContainer={triggerNode => triggerNode.parentNode}
                 showSearch
                 style={{ width: '100%' }}
                 defaultValue={record.deadLineDate ? record.deadLineDate : []}
                 placeholder={messages('common.please.select')}
                 optionFilterProp="children"
                 onChange={e => this.handleChange(e,record.indexTag,'deadLineDate')}
               >
                 {deadLineDateArray.map((item,index) => (
                   <Option key={item.value} value={item.value}>{item.label}</Option>
                 ))}
            </Select>
            </span>
          )
        },{
          title: messages('supplier.key7'/*账单月*/),
          dataIndex: 'billMonth',
          key: 'billMonth',
          width: 150,
          render: (text,record,value) => (
            <span>
              <Select
                getPopupContainer={triggerNode => triggerNode.parentNode}
                style={{ width: '100%' }}
                defaultValue={record.billMonth ? record.billMonth : []}
                placeholder={messages('common.please.select')}
                onChange={e => this.handleChange(e,record.indexTag,'billMonth')}
              >
                {billMonthArray.map((item,index) => (
                  <Option key={item.value} value={item.value}>{item.label}</Option>
                ))}
              </Select>
            </span>
          )
        }]
      },{
        title: messages('common.operation')/*操作(*/,
        dataIndex: 'operate',
        key: 'operate',
        width: 50,
        render: (text,record) => (
          <span>
              <Popconfirm onConfirm={(e) => this.handleDelete(e, record)} title={messages('supplier.key8'/*你确认要删除？*/)}>{/* 你确定要删除organizationName吗 */}
                <a href="#" onClick={(e) => {e.preventDefault();e.stopPropagation();}}>{messages('common.delete')}</a>
              </Popconfirm>
            </span>
        )
      }],
      warning: true,//是否显示顶部的warning
      vendorsId: this.props.params.vendorsId,
      cnVendorsName: this.props.params.supplierChinaName,
      supplierDashboard: menuRoute.getRouteItem('overview','key'),
      supplierDetail: menuRoute.getRouteItem('supplier-detail','key'),
      subApplicationPage: menuRoute.getRouteItem('sub-application','key'),    //子应用管理的页面项

      showDidiServer: false, // 开通滴滴时服务选择modal
    };

  }

  componentDidMount(){
    const { supplierName } = this.props.params;

    switch (supplierName){
      case 'didi': {
        this.setState({
          modalBindTitle: messages('supplier.key9'/*绑定滴滴服务*/),
          modalOpenTitle: ''});
        break;
      }
      case 'jd': {
        this.setState({modalBindTitle: '绑定京东服务',modalOpenTitle: ''});
        break;
      }
      case 'ctrip': {
        this.setState({
          modalBindTitle: messages('supplier.key10'/*绑定携程服务*/),
          modalOpenTitle: messages('supplier.key11'/*在线开通携程服务*/)});
        break;
      }
      case 'CMBC': {
        enableSupplierService.getCMBCAccount().then(resp => {
          if (resp.status === 200){
            if (resp.data.rows){
              resp.data.rows.tenantBankCardCfgList.map((item,index) => {
                let { tableIndex } = this.state;
                tableIndex ++ ;
                this.setState({tableIndex},() => {
                  item.indexTag = this.state.tableIndex
                });
              });
              this.setState({data: resp.data.rows.tenantBankCardCfgList},() => {
                if (this.state.data.length > 0){
                  this.setState({cmbcCurrent: 1})
                }else {
                  this.setState({cmbcCurrent: 0})
                }
              })
            }
          }
        }).catch(error => message.error(messages('common.error')));
        break;
      }
    }
  }

  handleBindCancel = () => {
    this.setState({modalBindVisible: false});
  };

  handleOpenCancel = () => {
    this.setState({modalOpenVisible: false});
  };

  onChangeSelectDidiServer = (checked) => {
    this.didiServerValues = checked;
  }

  onCancelDidiSelectServer = () => {
    this.setState({showDidiServer: false});
  }

  onOpenDidiSelectServer = () => {
    this.setState({showDidiServer: true});
  }

  //开通滴滴服务
  openDidiService = () => {
    const { companyOID, name } = this.props.company;
    if(this.didiServerValues.length === 0){
      message.error(messages('supplier.key216')/*请选择授权范围*/)
      return ;
    }
    let params = {
      "outCompanyId": companyOID,
      "outCompanyName":name,
      "outMemberId":this.props.user.userOID,
      "authScope":this.didiServerValues.join('|'),
      "callBack":"applyType=pc"
    };
    enableSupplierService.getToken(companyOID,params).then(resp => {
      if (resp.data.errno === '0'){
        let token = resp.data.data.open_auth_token;
        this.setState({showDidiServer: false});
        window.open(`https://api.es.xiaojukeji.com/openauth/Platform/index?open_auth_token=${token}`);
      }else {
        message.error(resp.data.errmsg);
      }
    })
  };


  //绑定携程服务
  handleBind = () => {
    const { company } = this.props;

    const { supplierName } = this.props.params;
    this.props.form.validateFieldsAndScroll((err,fieldsValue) => {
      if (!err){
        let params = {
          vo: {
            accountID: fieldsValue['accountID'],
            appKey: fieldsValue['appKey'],
            appSecurity: fieldsValue['appSecret'],
            binding: true,
            companyName: company.name,
            companyOID: company.companyOID,
            userName: '',
            password: ''
          }
        };
        enableSupplierService.handleBind(supplierName,params).then(resp => {
          if (resp.data.responseCode === '200'){
            message.success(messages('supplier.key12'/*绑定成功*/));
            this.context.router.push(this.state.supplierDetail.url.replace(':supplierName','ctrip'));
          }else {
            message.error(resp.data.responseMessage);
          }
        }).catch(error => {
          Modal.error({
            title: messages('supplier.key13'/*绑定失败*/),
            okText: messages('supplier.key14'/*知道了*/)
          })
        })
      }
    })
  };

  //开通携程服务
  handleOpen = () => {
    const { companyOID } = this.props.company;
    const { supplierName } = this.props.params;
    enableSupplierService.handleOpen(supplierName,companyOID).then(resp => {
      if (resp.data.responseCode === '200'){
        if(supplierName === 'ctrip'){
          this.setState({
            ctripSuccessVisible: true,
            modalOpenVisible: false,
            appKey: resp.data.vo.appKey,
            appSecurity: resp.data.vo.appSecurity
          })
        }
      }else {
        this.setState({modalOpenVisible: false});
        message.error(resp.data.responseMessage);
      }
    }).catch(error => message.error(messages('common.error')));
  };

  //开通饿了么
  openEleme = (type) => {
    if(this.lock){
      return;//锁是打开的不继续执行下面的代码
    }else{
      this.lock = true;//打开
    }
    const { supplierName } = this.props.params;
    let params = [];
    switch (type){
      case 'eleme':params = ["vendor.eleme"];
        break;
      case 'yget':params = ["vendor.esmart"];
        break;
      case 'tongcheng':params = ["1004"];
        break;
      case 'best':params = ["1003"];
        break;
    }

    enableSupplierService.openEleme(params).then(resp => {
      this.lock = false;//关闭
      if (resp.status === 200){
        message.success(messages('supplier.key15'/*开通成功*/));
        this.context.router.push(this.state.supplierDetail.url.replace(':supplierName',supplierName))
      }
    }).catch(err => {
      this.lock = false;//关闭
    })


  };

  //关闭携程开通成功modal
  hideCtripSuccess = () => {
    this.setState({ctripSuccessVisible: false})
  };

  //返回供应商管理
  backToDashboard = () => {
    this.context.router.push(this.state.supplierDashboard.url);
  };

  //新增账户信息添加表格行
  addRow = () => {
    const { data } = this.state;
    let { tableIndex } = this.state;
    tableIndex ++ ;
    this.setState({tableIndex},() => {
      const newData = {
        indexTag: this.state.tableIndex,
        clientId: '',
        clientSecret: '',
        corNum: '',
        deadLineDate: '',
        billMonth: ''
      };
      this.setState({data: [...data,newData]});
    });
  };

  //删除一个表格行
  handleDelete = (e,record) => {
    const { data } = this.state;
    const deleteIndex = data.findIndex(data => data.indexTag === record.indexTag);
    data.splice(deleteIndex,1);
    this.setState({data});
  };

  //开通商务卡
  openCMBC = () => {
    const { supplierName } = this.state;

    const { data } = this.state;
    if (data.length === 0){
      message.error('客户不能为空');
      return false
    } else {
      data.map(item => {
        if (item.billMonth instanceof Array){
          item.billMonth = item.billMonth.join(',');
        }
      });
      let verifyId = data.some(item => {      //验证客户号
        return item.clientId.length !==8
      });
      if (verifyId){
        message.error('客户号为8位');
        return ;
      }
      let verifySecret = data.some(item => {  //验证密码
        return item.clientSecret.length !== 8
      });
      if (verifySecret){
        message.error('密码为8位');
        return;
      }
      let verifyCorNum = data.some(item => {  //验证成本中心号
        return item.corNum.length !== 10
      });
      if (verifyCorNum){
        message.error('成本中心号为10位');
        return;
      }
      this.setState({loading: true});
      enableSupplierService.checkCMBCStatus().then(resp => {
        if (resp.status === 200){
          let params = {
            status: 0,
            tenantBankCardCfgList: this.state.data
          };
          enableSupplierService.openCMBC(params).then(resp => {
            if (resp.data.success){
              this.setState({loading: false});
              message.success(messages('supplier.key15'/*开通成功*/));
              this.context.router.push(this.state.supplierDetail.url.replace(':supplierName','CMBC'))
            }else {
              this.setState({loading: false});
              message.error(resp.data.message);
            }
          }).catch(error => {
            errorMessage(error.response, messages('common.save.filed'));
            this.setState({loading: false});
          })
        }
      })
    }
  };

  handleChange = (value,indexTag,colunm) => {
    const newData = [...this.state.data];
    const target = newData.filter(item => indexTag === item.indexTag)[0];
    if (target){
      target[colunm] = value;
      this.setState({data: newData})
    }
  };

  //wjk add 2018 07 11

  openHRS = () =>{
    this.setState({hrsModal:true});
  }

  openJD = () =>{
    this.setState({JDModal:true});
  }

  closeBingModal = () => {
    this.setState({
      hrsModal:false,
      JDModal:false,
    })
  }

  //HRS绑定
  bingHRSService = () => {
    if(this.lock){
      return;//锁是打开的不继续执行下面的代码
    }else{
      this.lock = true;//打开
    }
    this.props.form.validateFieldsAndScroll((err,values) => {
      if(!err){
        let param = {
          companyOID:this.props.company.companyOID,
          hrsClientKey:values.hrsClientKey,
          hrsClientPassword:values.hrsClientPassword,
          hrsClientType:values.hrsClientType,
          hrsCustomerKey:values.hrsCustomerKey
        }
        enableSupplierService.openHRS(param).then(resp => {
          this.lock = false;
          if (resp.data.responseCode === '200'){
            message.success(messages('supplier.key12'/*绑定成功*/));
            this.context.router.push(this.state.supplierDetail.url.replace(':supplierName','hrs'));
          }else {
            message.error(resp.data.responseMessage);
          }
        }).catch(err => {
          this.lock = false;
          Modal.error({
            title: messages('supplier.key13'/*绑定失败*/),
            okText: messages('supplier.key14'/*知道了*/)
          })
        })
      }
    })
  }

  //京东绑定
  bingJDService = () => {
    if(this.lock){
      return;//锁是打开的不继续执行下面的代码
    }else{
      this.lock = true;//打开
    }
    this.props.form.validateFieldsAndScroll((err,values) => {
      if(!err){
        values.companyOID = this.props.company.companyOID;
        values.companyName = this.props.company.name;
        enableSupplierService.openJD(values).then(resp => {
          this.lock = false;
          if (resp.data.responseCode === '200'){
            message.success(messages('supplier.key12'/*绑定成功*/));
            this.context.router.push(this.state.supplierDetail.url.replace(':supplierName','jd'));
          }else {
            message.error(resp.data.responseMessage);
          }
        }).catch(err => {
          this.lock = false;
          Modal.error({
            title: messages('supplier.key13'/*绑定失败*/),
            okText: messages('supplier.key14'/*知道了*/)
          })
        })
      }
    })
  }

  publicConfirmModal = (type) =>{
    let content = "";
    let isShowConfirm = false;
    switch (type){
      case 'eleme':isShowConfirm = true;
      content = messages('supplier.key16'/*启用饿了么服务*/)+"?";
        break;
      case 'yget':isShowConfirm = true;
        content = messages('supplier.key17'/*启用油费话费服务*/)+"？";
        break;
      case 'tongcheng':isShowConfirm = true;
        content = messages('supplier.key18'/*启用同城服务*/)+"？";
        break;
      case 'best':isShowConfirm = true;
        content = messages('supplier.key19'/*启用百动服务*/)+"?";
        break;
      default :break;
    }
    if(isShowConfirm){
      Modal.confirm({
        title:messages('supplier.key20'/*提示*/),
        content:content,
        onOk:()=>{this.openEleme(type)}
      })
    }
  }

  render(){
    const { modalBindTitle, modalBindVisible, modalOpenTitle, modalOpenVisible, cmbcCurrent,
      columns, data, appSecurity, appKey, ctripSuccessVisible, warning, cnVendorsName, subApplicationPage } = this.state;
    const { hrsModal, JDModal, showDidiServer} = this.state;
    const { supplierName } = this.props.params;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 10, offset: 1}
    };
    const steps = [{
      title: messages('supplier.key21'/*线下开卡*/)
    },{
      title: messages('supplier.key22'/*填写启用信息*/)
    }];
    const message = (
      <Row>
        <Col span={23}>
          {messages('supplier.key217',{arg1:cnVendorsName})/*您已关闭{arg1}，请前往【APP应用管理】页面*/}：
        </Col>
        <Col span={1} onClick={() => {this.setState({warning: false})}} style={{textAlign: 'right', cursor: 'pointer'}}>X</Col>
      </Row>
    );
    const description = (
      <div>
        <Row span={20} style={{marginBottom: 5}}> {messages('supplier.key218')/*1、将应用状态设置为【禁用】*/}
        </Row>
        <Row span={20} style={{marginBottom: 5}}> {messages('supplier.key219')/*2、该应用将不在【APP-应用】中显示*/}
        </Row>
      </div>
    );
    return (
      <div className="enable-service">
        {
          warning ?
            <div style={{marginBottom: 20}}>
              <Alert
                message={message}
                description={description}
                type="warning"
                showIcon
              />
            </div>
            : null
        }
        {/*滴滴*/}
        {supplierName === 'didi' && (
          <div style={{paddingBottom:60}}>
            <h3>{messages('supplier.key23'/*启用滴滴服务*/)}</h3>
            <div style={{width: '80%', margin: '0 auto'}}>
              <div className="bg-img" style={{textAlign: 'center'}}>
                <img src={CMBCImg} alt="" style={{width: '176px', height: '176px'}}/>
              </div>
              <div className="black-tips">
                {messages('supplier.key24'/*开启滴滴服务后，滴滴费用可直接推送到汇联易中*/)}
              </div>
              <div className="open-button">
                <Button type="primary" onClick={this.onOpenDidiSelectServer}>
                  {messages('supplier.key25'/*立即开通*/)}</Button>
              </div>
              <div className="didi-open-step">
                <Steps size="small" className="step-line">
                  <Step title={messages('supplier.key26'/*点击【立即开通】按钮*/)}></Step>
                  <Step title={messages('supplier.key27'/*登录滴滴企业后台*/)}></Step>
                  <Step title={messages('supplier.key28'/*开通成功*/)}></Step>
                </Steps>
                <Row type="flex" justify="space-between">
                  <Col span={7}>
                    <Card className="card-style">
                      <p>
                        {messages('supplier.key29'/*点击后会通过汇联易专用链接跳转至滴滴企业平台登录页面*/)}
                      </p>
                    </Card>
                  </Col>
                  <Col span={7}>
                    <Card className="card-style">
                      <p>
                        {messages('supplier.key30'/*输入企业已有滴滴账号进行登录*/)}
                      </p>
                      <p>
                        {messages('supplier.key31'/*若没有滴滴企业账号，可注册后再进行登录*/)}
                      </p>
                    </Card>
                  </Col>
                  <Col span={7}>
                    <Card className="card-style">
                      <p>
                        {messages('supplier.key32'/*登录成功后，滴滴出行状态变为已启用*/)}
                      </p>
                      <p>
                        {messages('supplier.key33'/*若状态没有变化，可刷新供应商管理页面*/)}
                      </p>
                    </Card>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        )}

        <Modal
          onOk={this.openDidiService}
          onCancel={this.onCancelDidiSelectServer}
          visible={showDidiServer} title={messages('supplier.key216')/*请选择授权范围*/}
        >
          <br/>
          <CheckboxGroup defaultValue={this.didiServerValues} onChange={this.onChangeSelectDidiServer}>
            <Checkbox value='1'>{messages('supplier.key220')/*用户管理*/}</Checkbox>
            <Checkbox value='2'>{messages('menu.order-management')/*订单管理*/}</Checkbox>
            <Checkbox value='3'>{messages('setting.key757')/*发票管理*/}</Checkbox>
          </CheckboxGroup>
          <br/>
        </Modal>

        {/*饿了么*/}
        {supplierName === 'eleme' && (
          <div>
            <h3>{messages('supplier.key16'/*启用饿了么服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={elemeImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key34'/*点击【立即开通】，即可使用饿了么服务*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={()=>this.publicConfirmModal('eleme')}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
          </div>
        )}

        {/*惠源*/}
        {supplierName === 'yget' && (
          <div>
            <h3>{messages('supplier.key17'/*启用油费话费服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key36'/*点击【立即开通】，即可使用油卡话费服务*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={()=>this.publicConfirmModal('yget')}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
          </div>
        )}

        {/*HRS*/}
        {supplierName === 'hrs' && (
          <div>
            <h3>{messages('supplier.key37'/*启用HRS服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key38'/*点击【立即开通】，即可使用HRS服务*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={this.openHRS}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
          </div>
        )}

        {
          supplierName === 'heliosHotel' && <OpenHeliosHotel />
        }

        {/*JD*/}
        {supplierName === 'jd' && (
          <div>
            <h3>{messages('supplier.key39'/*启用京东服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key40'/*绑定京东账号后，即可在汇联易中使用京东*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={this.openJD}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
            <div>
              <Row>
                <Col span={8} className='flexCenter'>
                  <span className='stepPointOff'>1</span>
                </Col>
                <div className='lineStep' style={{left:'27%'}} />
                <Col span={8} className='flexCenter'>
                  <span className='stepPointOff'>2</span>
                </Col>
                <div className='lineStep' style={{left:'60%'}} />
                <Col span={8} className='flexCenter'>
                  <span className='stepPointOn' style={{color:'#32CD91',backgroundColor:'white',border:'1px solid #32CD91'}}>3</span>
                </Col>
              </Row>
              <Row>
                <Col span={8} className='textCenter'>
                  <span style={{fontWeight:''}}>{messages('supplier.key41'/*点击【立即绑定】按钮*/)}</span>
                </Col>
                <Col span={8} className='textCenter'>
                  <span>{messages('supplier.key42'/*填写企业京东账号*/)}</span>
                </Col>
                <Col span={8} className='textCenter'>
                  <span style={{color:'#32CD91'}}>{messages('supplier.key43'/*等待开通结果*/)}</span>
                </Col>
              </Row>
              <Row>
                <div className='jd-triangle' style={{left:'15%'}} />
                <div className='jd-triangle' style={{left:'48.5%'}} />
                <div className='jd-triangle' style={{left:'82%'}} />
              </Row>
              <Row>
                <Col span={8} className='textCenter'>
                  <div className='contentBox'>
                    <ul>
                      <li>{messages('supplier.key44'/*弹出在线绑定京东服务弹框*/)}</li>
                    </ul>
                  </div>
                </Col>
                <Col span={8} className='textCenter'>
                  <div className='contentBox'>
                    <ul>
                      <li>{messages('supplier.key45'/*输入APPKEY*/)}</li>
                      <li>{messages('supplier.key46'/*输入APPSECRET*/)}</li>
                      <li>{messages('supplier.key47'/*输入Username*/)}</li>
                      <li>{messages('supplier.key48'/*输入Password*/)}</li>
                      <li>.....</li>
                    </ul>
                  </div>
                </Col>
                <Col span={8} className='textCenter'>
                  <div className='contentBox'>
                    <ul>
                      <li>{messages('supplier.key49'/*点击【绑定】等待绑定结果*/)}</li>
                      <li>{messages('supplier.key50'/*绑定成功后，自动返回至供应商管理主页，京东启用成功*/)}</li>
                    </ul>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        )}

        {/*同程*/}
        {supplierName === 'tongcheng' && (
          <div>
            <h3>{messages('supplier.key18'/*启用同城服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key51'/*点击【立即开通】，即可使用同程火车服务*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={()=>this.publicConfirmModal('tongcheng')}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
          </div>
        )}

        {/*百动*/}
        {supplierName === 'best' && (
          <div>
            <h3>{messages('supplier.key19'/*启用百动服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt=""/>
            </div>
            <div className="black-tips">{messages('supplier.key52'/*点击【立即开通】，即可使用场馆预订服务*/)}</div>
            <div className="open-button">
              <Button type="primary" onClick={()=>this.publicConfirmModal('best')}>
                {messages('supplier.key35'/*立即开通*/)}
              </Button>
            </div>
          </div>
        )}

        {/*携程*/}
        {supplierName === 'ctrip' && (
          <div>
            <h3>{messages('supplier.key53'/*启用携程服务*/)}</h3>
            <div className="bg-img" style={{textAlign: 'center'}}>
              <img src={CMBCImg} alt="" style={{width: '176px', height: '176px'}}/>
            </div>
            <p style={{textAlign: 'center',margin: '30px auto'}}>
              {messages('supplier.key54'/*开启携程服务后，可在汇联易中使用携程服务*/)}
            </p>
            <div className="open-button" style={{marginBottom: '20px'}}>
              <Button type="primary" onClick={() => this.setState({modalOpenVisible: true})}>
                {messages('supplier.key55'/*在线开通*/)}
              </Button>
            </div>
            <div className="hand-to-bind">
              <a onClick={() => this.setState({modalBindVisible: true})}>
                {messages('supplier.key56'/*企业已有携程账号？请点击【这里】进行账号绑定*/)}
              </a>
            </div>
            <Modal title={messages('supplier.key57'/*开通携程服务成功*/)}
                   visible={ctripSuccessVisible}
                   onCancel={this.hideCtripSuccess}
                   footer={[
                     <Button key="backToDashboard" type="primary" onClick={this.backToDashboard}>
                       {messages('supplier.key58'/*返回供应商管理*/)}</Button>
                   ]}>
              <div style={{marginBottom: '32px'}}>
                {messages('supplier.key59'/*携程服务（小客户）开通成功！*/)}</div>
              <div>APPSECRET：{appSecurity}</div>
              <div>APPKEY：{appKey}</div>
            </Modal>
          </div>
        )}

        {/*招行商务卡*/}
        {supplierName === 'CMBC' && (
          <div style={{margin: '0 auto'}}>
            <h3>{messages('supplier.key60'/*启用招行商务卡服务*/)}</h3>
            <Steps size="small" className="step-line" current={cmbcCurrent} style={{width: '50%',margin: '0 auto 20px'}}>
              {steps.map(item => <Step key={item.title} title={item.title}></Step>)}
            </Steps>
            {cmbcCurrent === 0 && (
              <div style={{width: '50%',margin: '0 auto'}}>
                <div className="CMBC-bg" style={{height: '240px',textAlign: 'center'}}>
                  <img src={CMBCImg} alt="" style={{width: '176px', height: '176px'}}/>
                </div>
                <div className="CMBC-tips">
                  <div className="tip1" style={{textAlign: 'center'}}>
                    {messages('supplier.key61'/*请先联系招商银行，线下为员工开卡*/)}
                  </div>
                  <div className="e-mail" style={{textAlign: 'center'}}>jinxiaonan@cmbchina.com</div>
                </div>
                <div className="CMBC-button" style={{marginTop: '32px',textAlign: 'center'}}>
                  <Button type="primary" onClick={() => this.setState({cmbcCurrent: cmbcCurrent + 1})}>
                    {messages('supplier.key62'/*我已开卡*/)}</Button>
                </div>
              </div>
            )}
            {cmbcCurrent === 1 && (
              <div>
                <Table
                  columns={columns}
                  dataSource={data}
                  rowKey={record => record.indexTag}
                  pagination={false}
                  bordered
                  size="middle"
                />
                <Button type="dashed" style={{width: '100%',marginTop: '10px'}} onClick={() => this.addRow()}>
                  <Icon type="plus" /> {messages('supplier.key63'/*新增账户信息*/)}
                </Button>
                <div style={{width: '30%',margin: '20px auto'}}>
                  <Button type="primary" style={{width: '100%', height: '40px'}}
                          loading={this.state.loading}
                          onClick={this.openCMBC}>
                    {messages('supplier.key25'/*立即开通*/)}</Button>
                </div>
              </div>
            )}
          </div>
        )}

        {/*绑定账号的modal*/}
        <Modal
          title={modalBindTitle}
          visible={modalBindVisible}
          onCancel={this.handleBindCancel}
          footer={[
            <Button key="cancel" onClick={this.handleBindCancel}>{messages('common.cancel')/*取消(*/}</Button>,
            <Button key="bind" type="primary" onClick={() =>this.handleBind()}>
              {messages('supplier.key64'/*绑定*/)}</Button>
          ]}>
          <div className="tip" style={{marginBottom: '10px'}}>
            {supplierName === 'ctrip' && (
              <span>{messages('supplier.key65'/*如果企业已经有携程商旅账号，请在此处进行绑定*/)}</span>
            )}
            {supplierName === 'didi' && (
              <span>{messages('supplier.key66'/*如果企业已经有滴滴已鉴权账号，请在此处进行绑定*/)}</span>
            )}
          </div>
          <Form onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="APPSECRET">
              {getFieldDecorator('appSecret',{
                rules: [{
                  required: modalBindVisible,
                  message: messages('common.please.enter')
                }]
              })(
                <Input placeholder={messages('common.please.enter')}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="APPKEY">
              {getFieldDecorator('appKey',{
                rules: [{
                  required: modalBindVisible,
                  message: messages('common.please.enter')
                }]
              })(
                <Input placeholder={messages('common.please.enter')}/>
              )}
            </FormItem>
            {supplierName == 'ctrip' && (
              <FormItem {...formItemLayout} label="AccountId">
                {getFieldDecorator('accountID',{
                  rules: [{
                    message: messages('common.please.enter')
                  }]
                })(
                  <Input placeholder={messages('common.please.enter')}/>
                )}
              </FormItem>
            )}
          </Form>
        </Modal>

        {/*开通账号的modal*/}
        <Modal
          title={modalOpenTitle}
          visible={modalOpenVisible}
          onCancel={this.handleOpenCancel}
          footer={[
            <Button key="cancel" onClick={this.handleOpenCancel}>{messages('common.cancel')/*取消(*/}</Button>,
            <Button key="bind" type="primary" onClick={this.handleOpen}>
              {messages('supplier.key67'/*继续*/)}</Button>
          ]}>
            <div style={{marginBottom: '16px'}}>
              {messages('supplier.key68'/*如果企业已经有携程商旅账号，请关闭该界面后，点击下方链接进行绑定*/)}
            </div>
            <div style={{marginBottom: '16px'}}>
              {messages('supplier.key69'/*【在线开通】服务范畴*/)}
            </div>
            <div style={{marginBottom: '16px'}}>
              {messages('supplier.key70'/*在线开通携程携程服务只能开通携程小客户权限，如需使用携程大客户服务请联系携程办理大客户企业服务，办理成功后进行绑定*/)}
            </div>
            <div  style={{marginBottom: '16px'}}>
              {messages('supplier.key71'/*点击【继续】按钮，携程会生成一个新的公司账号*/)}
            </div>
        </Modal>

        {/*HRS*/}
        <Modal title={messages('supplier.key72'/*绑定HRS账号*/)}
               visible={hrsModal}
               onCancel={this.closeBingModal}
               onOk={this.bingHRSService}
        >
          <Form>
            <FormItem {...formItemLayout} label={'ClientKey'}>
              {getFieldDecorator('hrsClientKey',{
                rules:[{
                  required:hrsModal,
                  message:messages('common.can.not.be.empty')/*'不能为空'*/
                }]
              })(
                <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={'ClientPassword'}>
              {getFieldDecorator('hrsClientPassword',{
                rules:[{
                  required:hrsModal,
                  message:messages('common.can.not.be.empty')/*'不能为空'*/
                }]
              })(
                <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={'ClientType'}>
              {getFieldDecorator('hrsClientType',{
                rules:[{
                  required:hrsModal,
                  message:messages('common.can.not.be.empty')/*'不能为空'*/
                }]
              })(
                <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={'CustomerKey'}>
              {getFieldDecorator('hrsCustomerKey',{
                rules:[{
                  required:hrsModal,
                  message:messages('common.can.not.be.empty')/*'不能为空'*/
                }]
              })(
                <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
              )}
            </FormItem>
          </Form>
        </Modal>

        {/*JD*/}
        <Modal title={messages('supplier.key73'/*在线绑定京东服务*/)}
               visible={JDModal}
               onCancel={this.closeBingModal}
               onOk={this.bingJDService}
        >
          <div style={{marginBottom:12}}>{messages('supplier.key74'/*如果已有【京东企业账号】，请在下方填写相应信息*/)}:</div>
          <div style={{height:500,overflow:'auto'}}>
            <Form>
              <FormItem {...formItemLayout} label={'APPKey'}>
                {getFieldDecorator('appKey',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={'AppSecret'}>
                {getFieldDecorator('appSecret',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={'UserName'}>
                {getFieldDecorator('userName',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={'Password'}>
                {getFieldDecorator('password',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>

              <FormItem {...formItemLayout} label={messages('supplier.key75'/*支付方式*/)}>
                {getFieldDecorator('paymentType',{
                  initialValue:1
                })(
                  <RadioGroup>
                    <Radio value={1}>{messages('supplier.key76'/*货到付款*/)}</Radio>
                    <Radio value={4}>{messages('supplier.key77'/*在线支付*/)}</Radio>
                    <Radio value={101}>{messages('supplier.key78'/*金采支付*/)}</Radio>
                  </RadioGroup>
                )}
              </FormItem>

              <FormItem {...formItemLayout} label={messages('supplier.key79'/*发票抬头*/)}>
                {getFieldDecorator('invoiceTitle',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key80'/*收件人*/)}>
                {getFieldDecorator('vatInvoiceName',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key81'/*电话*/)}>
                {getFieldDecorator('vatInvoicePhone',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key82'/*省*/)}>
                {getFieldDecorator('vatInvoiceProvince',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key83'/*市*/)}>
                {getFieldDecorator('vatInvoiceCity',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key84'/*县*/)}>
                {getFieldDecorator('vatInvoiceCounty',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label={messages('supplier.key85'/*地址*/)}>
                {getFieldDecorator('vatInvoiceAddress',{
                  rules:[{
                    required:JDModal,
                    message:messages('common.can.not.be.empty',{name:''})/*'不能为空'*/
                  }]
                })(
                  <Input placeholder={messages('common.please.input')/*'请输入'*/}/>
                )}
              </FormItem>
            </Form>
          </div>
        </Modal>


      </div>
    )
  }
}

enableService.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user
  }
}

const WrappedEnableService = Form.create()(enableService);

export default connect(mapStateToProps)(WrappedEnableService)
